<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%--pageEncoding="UTF-8"让前端页面和contentType保持一致也是UTF-8就不会乱码。--%>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

<h3>表单提交</h3>
<%-- 点了提交，就会被提交到BookController的addBook()方法，因为它的RequestMapping("/book/add")。--%>
<%--请求行传值--%>
<%--为了让控制器类接收Book对象类型，name和Book定义的属性名相同；--%>
<form action="test/add" method="post">
<%--    这里的name任意取名。--%>
    <p>图书名称：<input type="text" name="bookName"/></p>
    <p>图书作者：<input type="text" name="bookAuthor"/></p>
    <p>图书价格：<input type="text" name="bookPrice"/></p>
    <p>出版时间：<input type="text" name="publishTime"/></p>
    <p><input type="submit" value="提交"/></p>
</form>

<h3>超链接提交，url提交</h3>
<a href="book/add?bookName=Java">URL提交</a>

<h3>AJAX提交</h3>
<input type="button" value="ajax提交" id="btn1"/>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $("#btn1").click(function () {
        var obj = {};
        obj.bookName="Pyhton";
        obj.bookAuthor="张三风";
        obj.bookPrice=3.93;
        $.ajax({
            // 请求行
            // url:"book/list?name=C&author=lisi&price=3.33",
            url:"book/update",
            type:"post",
            // 请求头
            // headers:{
            //     token:"aaaaaaaaa"
            //
            // },
            // 请求类型,data的obj会被转换成json格式。
            contentType:"application/json",

            //设置预期服务器返回data的类型为JSON
            dataType:"json",

            // 请求体
            //上面obj可以写成
            // data:{
            //     bookName:"java",
            //     bookAuthor:"张三",
            //     bookPrice=3.33
            // }

            // Servlet处理方式可以用 data:obj
            // 对象转JSON。data为JSON格式字符串contentType必须为"application/json"。
            data:JSON.stringify(obj),

            success:function (res) {
                console.log(res);
            }
        });
    });
</script>

</body>
</html>